<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据监测总结</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 
            数据劫持 就是把我们配置的data 传入Vue，Vue劫持在原来的数据上添加一些setter,从而可以监视数据的改变
            总结Vue数据监测原理
            对象检测
                使用setter,当数据发送改变时触发setter,vue会改变数据的同时，重新编译模板，对比虚拟dom改变页面
            数组监测：
                在常用对数组的操作函数上做了调用Array.常用方法，在重新编译模板.....
                常用array函数 push pop shift unshift splice sort reverse 改变原数组
                不改变原数组 要重新赋值 filter map some event concat join indexOf slice
                注意：不能使用student.friend[0] = 100 这样的语法，vue 检测不到
                可以使用student.friend[3].a = value 这样的语法 应为a是对象的属性，有setter函数
            Vue.set() 的使用,添加响应式数据，不能在vm，根数据上发送改变
            使用语法Vue.set 或 vm.$set(student,'propertyName',value)
         -->
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:{
            'student':{
                friend:[1,2,{a:1}]
            }
        }
    })

</script>
</html>